<template>
  <div style="padding: 20px">
    <el-form :model="state.search" inline>
      <el-form-item label="点位名称">
        <el-input v-model="state.search.project_name" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="评估单位">
        <el-input v-model="state.search.evaluation_unit" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="评估时间">
        <el-date-picker
          v-model="state.search.evaluation_date"
          type="date"
          placeholder="请选择"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList" size="mini">搜索</el-button>
        <el-button type="warning" @click="reset" size="mini">重置</el-button>
        <el-button type="success" @click="onDownExcel" size="mini">导出</el-button>
        <el-button size="mini" type="primary" @click="addOrUpdate()">添加</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <template #header>
        <div class="red">
          <div>
            《高层民用建筑消防安全管理规定》高层民用建筑的业主、使用人或者消防服务单位、统一管理人应当每年至少组织开展一次整栋建筑的消防安全评估。
          </div>
        </div>
      </template>

      <el-table border :data="state.list" v-loading="state.loading">
        <el-table-column label="项目名称" prop="project_name" min-width="100"> </el-table-column>
        <el-table-column label="评估单位" prop="evaluation_unit" min-width="100"> </el-table-column>
        <el-table-column label="评估人员" prop="evaluation_user" min-width="100"> </el-table-column>
        <el-table-column label="评估时间" prop="evaluation_date" min-width="100"> </el-table-column>
        <el-table-column label="评估报告" prop="evaluation_file" min-width="100">
          <template #default="{ row }">
            <el-button v-if="row.evaluation_file" @click="showPDF(row.evaluation_file)">预览pdf</el-button>
          </template>
        </el-table-column>
        <el-table-column label="未审核时间" prop="no_audit_time" width="165"> </el-table-column>
        <el-table-column label="上传时间" prop="create_time" min-width="100"> </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template #default="{ row }">
            <el-button type="primary" link @click="addOrUpdate(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        background
        v-model:current-page="state.pagination.page"
        v-model:page-size="state.pagination.rows"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="state.total"
        @current-change="getList"
        @size-change="getList"
      />
    </el-card>
    <AddOrUpdate ref="addOrUpdateRef" @refresh="getList(1)"></AddOrUpdate>
    <PdfPreview ref="pdfPreviewRef" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { pinggubaogao, pinggubaogaoExcl } from '@/api/pinggubaogao'
import AddOrUpdate from './AddOrUpdate.vue'
import PdfPreview from '@/components/PdfPreview/index.vue'
const addOrUpdateRef = ref()
const pdfPreviewRef = ref()
const state = reactive({
  loading: false,
  url: '',
  search: {
    project_name: '',
    evaluation_unit: '',
    evaluation_date: ''
  },
  pagination: {
    rows: 20,
    page: 1
  },
  total: 0,
  list: []
})
const reset = () => {
  state.search = {
    project_name: '',
    evaluation_unit: '',
    evaluation_date: ''
  }
}
const getList = async (page = 1) => {
  state.loading = true
  if (page === 1) state.pagination.page = 1
  const { data } = await pinggubaogao({ ...state.pagination, ...state.search }).finally(() => (state.loading = false))
  state.list = data.list
  state.total = data.total
}
getList()

const onDownExcel = () => {
  pinggubaogaoExcl(state.search).then((res: any) => {
    const blob = new Blob([res], {
      type: 'application/vnd.ms-excel'
    })

    if (window.navigator.msSaveOrOpenBlob) {
      //兼容IE10
      navigator.msSaveBlob(blob, '导出文件.xlsx')
    } else {
      const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
      const a = document.createElement('a') //创建a标签
      a.style.display = 'none'
      a.href = href // 指定下载链接
      a.download = '导出文件.xlsx' //指定下载文件名
      a.click() //触发下载
      URL.revokeObjectURL(a.href) //释放URL对象
    }
  })
}
const addOrUpdate = (row?) => {
  addOrUpdateRef.value.open(row)
}
const showPDF = (url: string) => {
  pdfPreviewRef.value.open(url)
}
</script>

<style lang="scss" scoped>
.pdfobject-container {
  height: 680px;
  border: 1rem solid rgba(0, 0, 0, 0.1);
}

.red{
  color: red;
  margin-top: 15px;
  font-size: 14px;
}

</style>
